<template>
    <div class="withdraw-detail">
        <div class="withdraw-detail__name-wrap">
            <div class="withdraw-detail__name">{{channel === 'bank' ? title : ''}}&nbsp;&nbsp;{{no}}</div>
            <div class="withdraw-detail__money">{{moneyText}}</div>
        </div>
        <div class="withdraw-detail__desc-wrap">
            <div class="withdraw-detail__desc">{{withdrawStatus}}</div>
        </div>
        <div class="withdraw-detail__desc-wrap">
            <div class="withdraw-detail__desc">
                {{createdAt}}
            </div>

            <span class="withdraw-detail__action" @click="onClickWithdrawOrder">订单明细</span>
            <span v-if="certificate" class="withdraw-detail__action" @click="onClickCertificate">转账凭证</span>
        </div>
    </div>
</template>

<script lang="ts">
import {
    currency,
} from '@/lib/utils';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { api } from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'WithdrawDetail',
})
export default class WithdrawDetail extends Vue {
    @Prop({ type: String }) public action: any;
    // 头像
    @Prop({ type: String }) public avatar: any;
    // 昵称
    @Prop({ type: String }) public nickname: any;
    // 主文本
    @Prop({ type: String }) public title: any;
    // 副文本
    @Prop({ type: String }) public desc: any;
    // 时间
    @Prop({ type: String }) public createdAt: any;
    // 单价
    @Prop({ type: Number }) public price: any;
    // 金额
    @Prop({ type: Number }) public money: any;
    // 状态
    @Prop({ type: String }) public status: any;
    // 当前是哪种列表
    @Prop({ type: String }) public nav: any;
    /** 提现方式 */
    @Prop({ type: String, default: '' }) public channel: any;
    /** 提现账号 */
    @Prop({ type: String, default: '' }) public no: any;
    /** 转账凭证 */
    @Prop({ type: String }) public certificate?: string;
    @Prop({ required: true }) public detail!: User.WithdrawDetail;

    public get moneyText() {
        return currency(this.money);
    }

    /** 剩余天数 */
    // remainDay() {
    //     const day = 14 - dateDiff(dateParse(this.time), dateNow());
    //     if (day > 1) {
    //         return day + '天后发';
    //     } else if (day === 1) {
    //         return '明天发';
    //     } else {
    //         return '';
    //     }
    // },
    /** 提现状态 */
    public get withdrawStatus() {
        if (this.nav === 'withdraw' && this.status) {
            switch (this.status) {
            case 'init': return '提现中';
            case 'success': return '提现成功';
            case 'fail': return '提现失败';
            default: return null;
            }
        } else {
            return '';
        }
    }

    /**
     * 订单明细
     */
    public onClickWithdrawOrder() {
        api.push({
            name: ROUTE_NAME.USER_WITHDRAW_ORDER,
            params: {
                withdrawDetailId: this.detail.id + '',
            },
        });
    }
    public onClickCertificate() {
        wx.previewImage({
            current: this.certificate!,
            urls: [
                this.certificate!,
            ],
        });
    }
    public onClickAction() {
        this.$emit('action');
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.withdraw-detail {
    position: relative;
    padding: 10px 0;
    .avatar {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        background-color: @image-bg;
    }

    &__name-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    &__name {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .text-normal();
        .hidden-text();
        .name {
            max-width: 200rpx;
        }
        .color-red {
            padding-left: 10px;
            color: #E23B3D;
        }
    }

    &__desc-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    &__desc {
        flex: 1;
        .text-small();
        color: #9b9b9b;
        .hidden-text();
    }

    &__money {
        float: right;
        .font-bold();
        color: @color-yellow;
    }

    &__action {
        float: right;
        margin-left: 10px;
        .text-normal();
        color: @test-title-color;
    }
}
</style>
